<template>
  <div class="goodList">
      <div class="mb14" style="font-size: 12px;color:#F56464;"> 注:没有查询到站点，请前往总后台业务城市添加站点。</div>
    <el-form size="small" inline label-width="80px">
      <el-form-item label="站点搜索：">
        <el-input
          placeholder="请输入站点名称"
          class="dialogWidth"
          v-model="tableFrom.name"
          @keyup.enter.native="getList(1)"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getList(1)">查询</el-button>
      </el-form-item>       
    </el-form>
    <el-table
      ref="table"  
      :data="tableData.data"
      highlight-current-row
       @current-change="handleCurrentChange"
      size="small"
      v-loading="loading"
    >
      <el-table-column
        prop="id"
        label="站点ID"
        min-width="80"
      />

      <el-table-column
        prop="name"
        label="站点名称"
        min-width="130"
      />
      <el-table-column label="经纬度" prop="lng_lat" min-width="80"/>
      <el-table-column label="站点描述" prop="remark" min-width="120"/>
    </el-table>
    <div class="acea-row row-between mt20 mb15"> 
      <el-pagination
        :page-size="tableFrom.limit"
        :current-page="tableFrom.page"
        layout="prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="pageChange"
      />
      <div class="footer" slot="footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button
          type="primary"
          size="small"
          :loading="modal_loading"
          @click="ok"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>


import { getCitySelectLstApi } from '@/api/system';
export default {
  name: "index",
  props: {
    
    product_id: {
      type: String,
      default: "",
    }
  },
  data() {
    return {
      stop:'',
			cateIds:[],
      merCateList: [], // 商户分类筛选
      modal_loading: false,
      treeSelect: [],
       props: {
        emitPath: false
      },
      tableFrom: {
        name: "",
        type: 2,
        page: 1,
        limit: 10,
      },
      total: 0,
      loading: false,
      tableData: {
        total: 0,
        data: []
      },
      currentid: 0,
      productRow: {}, 
      images: [],
      diyVal: [],
      many: "",
      idKey: "product_id",
      multipleSelectionAll: this.selectedArr,
      // multipleSelectionAll: window.form_create_helper.get(this.$route.query.field) || [],
      // idKey: "product_id",
    };
  },
  computed: {
    
  },
  created() {
    let many = "";
    if (this.ischeckbox) {
      many = "many";
    } else {
      many = this.$route.query.type;
    }
    this.many = many;
    
  },
  mounted() {
    this.getList('');
   
  
  },
  methods: {

    checkSelectSet(row, index) {
      //row 就是每行的数据
      //return : false  就是禁用
      //return : true  不禁用
      return row.product_id != this.product_id
    },
		handleSelectAll () {
		  this.$refs.table.selectAll(false);
		},
    changeCheckbox(selection) {
      // let images = [];
      // selection.forEach(function (item) {
      //   let imageObject = item
      //   images.push(imageObject);
      // });
      // this.multipleSelectionAll = selection
      this.images = selection;
      this.diyVal = selection;
      if(this.isdiy)this.$emit("getProductDiy", selection);
    },
    handleCurrentChange(selection){
      console.log('selection',selection)
      this.stop = selection;
    },
    // 产品分类；
    goodsCategory() {
      categoryListApi(1)
        .then((res) => {
          this.treeSelect = res.data;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
  
     pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    },
    // 列表
    getList(num) {
      let that = this
      that.loading = true;
      that.tableFrom.page = num ? num : that.tableFrom.page
        getCitySelectLstApi(that.tableFrom)
          .then(async (res) => { 
            that.tableData.data = res.data.list;
            that.tableData.total = res.data.count;
          
            that.loading = false;
          })
          .catch((res) => {
            that.loading = false;
            that.$message.error(res.message);
          });
    },
   
    close(){
      this.$emit("close");
    },
    ok() {
      if (this.stop) {
         this.$emit("getStop", this.stop);
      } else {
        this.$message.warning("请先选择产品");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.tabform {
   .ivu-form-item {
    margin-bottom: 16px !important;
  }
}

.btn {
  margin-top: 20px;
  float: right;
}

.goodList {
   table {
    width: 100% !important;
  }
}

::v-deep .el-table__body tr.current-row>td.el-table__cell, .vxe-table--render-default .vxe-body--row.row--current.row--current {
    background-color: rgb(165 190 241) !important;
}
</style>
